<template>
	<view :class="[primarySize()]">
		<form @submit="bindSubmit">
			<view class="page-foot bg-white">
				<view class="ptb10 plr30">
					<button form-type="submit" hover-class="none" class="btn3">发送邀请</button>
				</view>
			</view>
			<input hidden name="user_id" :value="resume.user_id" />
			<input hidden name="resume_id" :value="resume.id" />
			<input hidden name="apply_id" :value="apply.id" />
			<view class="container">
				<view class="bg"></view>
				<view class="pr z2 p30">
					<view class="flex-box">
						<image :src="cdnurl(resume.personal.avatar)" mode="aspectFill" class="user_img"></image>
						<view class="flex-grow-1 pl30 fs24 colf lh32">
							<view class="fwb fs34 colf lh48">{{resume.personal.realname}}</view>
							<view class="mt15"><text v-if="resume.personal.gender_text">{{resume.personal.gender_text}}</text><text v-if="resume.personal.age"> |{{resume.personal.age}}岁</text><text v-if="resume.personal.current_address"> |{{resume.personal.current_address}}</text><text v-if="resume.personal.work_experience"> |{{resume.personal.work_experience?resume.personal.work_experience.name:''}}</text></view>
							<view class="mt10">
								目前状态：{{resume.personal.current_state?resume.personal.current_state.name:''}}</view>
						</view>
					</view>
					<view class="pt50"></view>
					<view class="box">
						<view class="m-list-flex info_item">
							<view class="col6">面试日期</view>
							<view class="m-cell-bd tr">
								<input hidden name="date" :value="date" />
								<picker mode="date" :value="today" :start="today" @change="bindDateChange">
									<view :class="[date?'picker':'col6']">{{date||'请选择'}}</view>
								</picker>
							</view>
							<image src="@/static/public/arrow-r.png" class="ico12 ml10" mode="widthFix"></image>
						</view>
						<view class="m-list-flex info_item">
							<view class="col6">面试时间</view>
							<view class="m-cell-bd tr">
								<input hidden name="time" :value="time" />
								<picker mode="multiSelector" :value="multi_index" :range="multi_array"
									@change="bindMultiPickerChange">
									<view :class="[time?'picker':'col6']">{{time||'请选择'}}</view>
								</picker>
							</view>
							<image src="@/static/public/arrow-r.png" class="ico12 ml10" mode="widthFix"></image>
						</view>
						<view class="m-list-flex info_item">
							<view class="col6">面试公司</view>
							<view class="m-cell-bd tr">
								{{companyName}}
							</view>
						</view>
						<view class="m-list-flex info_item">
							<view class="col6">面试职位</view>
							<input hidden name="job_id" :value="job.id" />
							<block v-if="!apply">
								<view class="m-cell-bd tr">
									<picker :range="jobs" range-key="job_name" @change="bindJobChange">
										<view :class="[!job?'col6':'picker']">{{job.job_name||'请选择'}}</view>
									</picker>
								</view>
								<image src="@/static/public/arrow-r.png" class="ico12 ml10" mode="widthFix"></image>
							</block>
							<view class="m-cell-bd tr" v-else>{{apply.job.job_name}}</view>
						</view>
						<view class="flex info_item" style="height: auto;padding: 30rpx 0;line-height: 34rpx;">
							<view class="col6">面试地址</view>
							
								<textarea auto-height name="address" maxlength="50"
									:value="companyAddress" class="flex-grow-1 tr pl30"
									placeholder="请填写" placeholder-class="cold7"></textarea>

							
						</view>
						<view class="m-list-flex info_item">
							<view class="col6">面试联系人</view>
							<view class="m-cell-bd tr">
								<input name="contact" maxlength="20" :value="contactPerson" type='text'
									placeholder-class="cold7" placeholder="请填写"></input>
							</view>
						</view>
						<view class="m-list-flex info_item">
							<view class="col6">联系电话</view>
							<view class="m-cell-bd tr m-ellipsis">
								<input name="contact_phone" maxlength="20" :value="contactPhone" type='number'
									placeholder-class="cold7" placeholder="请填写"></input>
							</view>
						</view>
						<view class="m-list-flex info_item" style="border-bottom: none;">
							<view class="col6">联系邮箱</view>
							<view class="m-cell-bd tr m-ellipsis">
								<input name="contact_email" maxlength="255" :value="contactEmail" type='text'
									placeholder-class="cold7" placeholder="请填写"></input>
							</view>
						</view>
					</view>


					<view class="box pb10">
						
						<view class="m-list-flex info_item">
							<view class="col6">备注</view>
							<view class="m-cell-bd tr single-line">
								<input name="notice" maxlength="255" type='text' placeholder-class="cold7"
									placeholder="请填写"></input>
							</view>
						</view>
<!--						<view class="flex-box h120" @click="bindSendMessageChange">-->
<!--							<input hidden name="send_message" :value="sendMessage" />-->
<!--							<image :src="sendMessage?iconPath('choose_sc.png'):iconPath('choose_uc.png')" mode="aspectFit"-->
<!--								class="ico40 mr15"></image>-->
<!--							<view class="col9">发送信息给候选人</view>-->
<!--						</view>-->
					</view>


				</view>
			</view>

		</form>
	</view>
</template>

<script>
	var validate = require("../../xilu/validate.js");
	const app = getApp();
	export default {
		data() {
			return {
				
				today: this.$util.formatDatetime(new Date(), 'yyyy-mm-dd'),
				now: this.$util.formatDatetime(new Date(), 'hh:ii'),
				jobs: [],
				resume: {
					personal: {
						avatar: ''
					}
				},
				apply: null,
				interview: {},
				job: null,
				sendMessage: 1, // 发消息开关

				companyName: '',
				companyAddress: '',
				contactPerson: '',
				contactPhone: '',
				contactEmail: '',
				date: '',
				time: '',
				check: false,
				// notices: ['请带简历','请着正装','请带作品','请带身份证'],
				selectedNoticeIndexes: [false, false, false, false],
				multi_array: [
					['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
						'18', '19', '20', '21', '22', '23'
					],
					['00', '30']
				],
				multi_index: [10, 0],
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad: function(options) {
			
			this.getOpenerEventChannel().on('dataTransfer', data => {
				this.resume = data.resume;
				this.apply = data.apply || null;
				this.job = data.apply ? data.apply.job : '';
				if (!data.apply) {
					//需要选择职位， 拉取可选择职位
					this.$core.get({
						url: 'xilujob.job_manage/index',
						data: {
							status: 1
						},
						success: ret => {
							this.jobs = ret.data.jobs;
						}
					});
				}
			});
			this.$core.get({
				url: 'xilujob.enterprise/info',
				success: ret => {
					this.companyName = ret.data.enterprise_info.company_name;
					this.companyAddress = ret.data.enterprise_info.address;
					this.contactPerson = ret.data.enterprise_info.contact_person;
					this.contactPhone = ret.data.enterprise_info.contact_phone;
					this.contactEmail = ret.data.enterprise_info.contact_email
				}
			});
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value;
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value;
			},
			bindSendMessageChange: function(e) {
				this.sendMessage = !this.data.sendMessage ? 1 : 0
			},
			bindMultiPickerChange: function(e) {
				let value = e.detail.value;
				let arr = this.multi_array;
				let n_time = arr[0][value[0]] + ":" + arr[1][value[1]];
				this.multi_index = value;
				this.time = n_time
			},
			bindJobChange(event) {
				let index = event.detail.value;
				this.job = this.jobs[index];
			},
			bindSubmit(event) {
				let page = this;
				let data = event.detail.value;
				var rule = [{
						name: 'date',
						rules: ['require'],
						errorMsg: {
							require: '请选择面试日期'
						}
					},
					{
						name: 'time',
						rules: ['require'],
						errorMsg: {
							require: '请选择面试时间'
						}
					},
					{
						name: 'job_id',
						rules: ['require'],
						errorMsg: {
							require: '请选择面试职位'
						}
					},
					{
						name: 'address',
						rules: ['require'],
						errorMsg: {
							require: '请填写面试地址'
						}
					},
					{
						name: 'contact',
						rules: ['require'],
						errorMsg: {
							require: '请填写面试联系人'
						}
					},
					{
						name: 'contact_phone',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '请填写联系电话',
							mobile: '请填写正确的手机号'
						}
					},
					{
						name: 'contact_email',
						rules: ['require', 'email'],
						errorMsg: {
							require: '请填写邮箱',
							email: '请填写正确的邮箱'
						}
					},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				data.interview_time = data.date + ' ' + data.time;
				this.$core.post({
					url: 'xilujob.job_interview/create_interview',
					data: data,
					success: ret => {
						let interview = ret.data.interview;
						uni.showModal({
							title: '提示',
							content: '面试邀请已发出',
							showCancel: false,
							success: res => {
								this.$chatIM.sendMessage(this.resume.user_id, interview.id, 6);
								page.getOpenerEventChannel().emit('dataTransfer', {
									interview: interview
								});
								uni.navigateBack();
							}
						});

					}
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		height: 410rpx;
		width: 100%;
		background: var(--primary);
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
	}

	.user_img {
		width: 149rpx;
		height: 149rpx;
		border: 3rpx solid #FFFFFF;
		border-radius: 50%;
	}

	.box {
		margin: 0 0 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background: #FFF;
		border-radius: 18rpx;
	}

	.arrow-r {
		margin-left: 18rpx;
	}

	.cold7 {
		color: #d7d7d7;
	}

	.info_item {
		font-size: 26rpx;
		color: #333;
		line-height: 119rpx;
		border-bottom: 1rpx solid #EAEAEA
	}

	.bd1ea {
		border-bottom: 1rpx solid #eaeaea
	}

	/* .info_item .m-cell-bd{padding-right: 18rpx;} */
	.info_item input {
		height: 120rpx;
		text-align: right
	}

	.take_item {
		margin: 0 0 30rpx;
		width: 50%;
		font-size: 28rpx;
		color: #000;
	}

	.take_item image {
		width: 40rpx;
		height: 40rpx;
		display: block;
		border-radius: 50%;
		margin-right: 14rpx;
	}


	.pt45 {
		padding-top: 45rpx;
	}

	.ptb60 {
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.h120 {
		height: 120rpx;
	}
</style>